{{ define "admin/table.html" }}
  {{ template "headertable" .}}
  {{ template "nav" . }}
  <div class="row">
    <div class="col-md-4">
      {{ template "menu" . }}
    </div>
    <div class="col-md-8">  
      <div class="row">
        <!--  col-md-offset-1 -->
        <div class="col-xs-12 col-sm-10">
          <h3>Select {{.Name}} to Change</h3>
          <!-- <ul class="pager">
              <li class="previous disabled">Site Administrator</li>
              <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
          </ul> -->
          <br/>
          <div id="toolbar">
            <button id="remove" class="btn btn-danger" disabled>
                <i class="glyphicon glyphicon-remove"></i> Delete
            </button>
            <button id="add" class="btn btn-success" onclick="Add({{.Name}})">
                <i class="glyphicon glyphicon-plus"></i> ADD 
            </button>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <table id="table"
                  data-toolbar="#toolbar"
                  data-search="true"
                  data-show-refresh="true"
                  data-show-toggle="true"
                  data-show-columns="true"
                  data-show-export="true"
                  data-detail-view="true"
                  data-detail-formatter="detailFormatter"
                  data-minimum-count-columns="2"
                  data-show-pagination-switch="true"
                  data-pagination="true"
                  data-id-field="id"
                  data-page-list="[10, 25, 50, 100, ALL]"
                  data-show-footer="false"
                  data-side-pagination="server"
                  data-url="/admin/data?name={{.Name}}"
                  data-response-handler="responseHandler">
                  <!-- <thead>
                      <tr>
                          <th data-field="id">ID</th>
                          <th data-field="name">Item Name</th>
                          <th data-field="price">Item Price</th>
                      </tr>
                  </thead> -->
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>    
  </div>
<script>
    var $table = $('#table'),
        $remove = $('#remove'),
        $add= $('#add'),
        selections = [];
    
    function Add(name) {
        window.open("http://"+window.location.host+"/admin/add?name="+name,"new open monitor","height=600,width=1000,top=0,left=200,fullscreen=no,scrollbars=0,location=no");
    }

    function Edit(name,id) {
        window.open("http://"+window.location.host+"/admin/edit?name="+name+"&id="+id,"new open monitor","height=600,width=1000,top=0,left=200,fullscreen=no,scrollbars=0,location=no");
    }

    $table.bootstrapTable({
        height:getHeight(),
        // height:400,
        columns:eval({{.Col | admincolumns}})
    });

    // function initTable() {
    //     $table.bootstrapTable({
    //         height:getHeight(),
    //         columns:eval({{.Col}})
    //     });
    // };

    function initTable() {
        console.log('ok');
    }

    setTimeout(function () {
        $table.bootstrapTable('resetView');
    }, 200);
    $table.on('check.bs.table uncheck.bs.table ' +
            'check-all.bs.table uncheck-all.bs.table', function () {
        $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
        // save your data, here just save the current page
        selections = getIdSelections();
        // push or splice the selections if you want to save all data selections
    });
    $table.on('expand-row.bs.table', function (e, index, row, $detail) {
        if (index % 2 == 1) {
            $detail.html('Loading from ajax request...');
            $.get('LICENSE', function (res) {
                $detail.html(res.replace(/\n/g, '<br>'));
            });
        }
    });
    $table.on('all.bs.table', function (e, name, args) {
        console.log(name, args);
    });
    $remove.click(function () {
        var r = confirm("确定删除吗？");
        if (r==true){
            var ids = getIdSelections();
            $.ajax({
                url:'/admin/delete?name={{.Name}}&ids='+ids.join(),
                type:'Post',
                success:function (data) {
                    alert(data);
                    $table.bootstrapTable('remove', {
                        field: 'id',
                        values: ids
                    });
                }
            })
            $remove.prop('disabled', true);
        }
    });
    $(window).resize(function () {
        $table.bootstrapTable('resetView', {
            height: getHeight()
        });
    });

    function getIdSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id
        });
    }
    function responseHandler(res) {
        $.each(res.rows, function (i, row) {
            row.state = $.inArray(row.id, selections) !== -1;
        });
        return res;
    }
    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    }
    function operateFormatter(value, row, index) {
        return [
            '<a class="like" href="javascript:void(0)" title="Like">',
            '<i class="glyphicon glyphicon-heart"></i>',
            '</a>  ',
            '<a class="remove" href="javascript:void(0)" title="Remove">',
            '<i class="glyphicon glyphicon-remove"></i>',
            '</a>'
        ].join('');
    }
    window.operateEvents = {
        'click .like': function (e, value, row, index) {
            alert('You click like action, row: ' + JSON.stringify(row));
        },
        'click .remove': function (e, value, row, index) {
            $table.bootstrapTable('remove', {
                field: 'id',
                values: [row.id]
            });
        }
    };
    function totalTextFormatter(data) {
        return 'Total';
    }
    function totalNameFormatter(data) {
        return data.length;
    }
    function totalPriceFormatter(data) {
        var total = 0;
        $.each(data, function (i, row) {
            total += +(row.price.substring(1));
        });
        return '$' + total;
    }
    function getHeight() {
        // return $(window).height() - $('h1').outerHeight(true);
        return $(window).height()/1.4;
    }
    // $(function () {
    //     var scripts = [
    //             // location.search.substring(1) || 'assets/bootstrap-table/src/bootstrap-table.js',
    //             // 'assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js',
    //             // 'http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js',
    //             // 'assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js',
    //             // 'http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js'
    //         ],
    //         eachSeries = function (arr, iterator, callback) {
    //             callback = callback || function () {};
    //             if (!arr.length) {
    //                 return callback();
    //             }
    //             var completed = 0;
    //             var iterate = function () {
    //                 iterator(arr[completed], function (err) {
    //                     if (err) {
    //                         callback(err);
    //                         callback = function () {};
    //                     }
    //                     else {
    //                         completed += 1;
    //                         if (completed >= arr.length) {
    //                             callback(null);
    //                         }
    //                         else {
    //                             iterate();
    //                         }
    //                     }
    //                 });
    //             };
    //             iterate();
    //         };
    //     eachSeries(scripts, getScript, initTable);
    // });
    // function getScript(url, callback) {
    //     var head = document.getElementsByTagName('head')[0];
    //     var script = document.createElement('script');
    //     script.src = url;
    //     var done = false;
    //     // Attach handlers for all browsers
    //     script.onload = script.onreadystatechange = function() {
    //         if (!done && (!this.readyState ||
    //                 this.readyState == 'loaded' || this.readyState == 'complete')) {
    //             done = true;
    //             if (callback)
    //                 callback();
    //             // Handle memory leak in IE
    //             script.onload = script.onreadystatechange = null;
    //         }
    //     };
    //     head.appendChild(script);
    //     // We handle everything using the script element injection
    //     return undefined;
    // }
</script>

    {{ template "footer" .}}
{{ end }}

 